<template>
  <div class="company">
    <div class="to">
      <van-row class="search">
        <van-col span="5">
          <strong>公司</strong>
        </van-col>
        <van-col span="19">
          <van-search
            v-model="qiye.q"
            shape="round"
            placeholder="请输入关键词"
            @keydown="onkeydown"
          />
        </van-col>
      </van-row>
      <div v-show="show" class="picture">
        <img src="@/assets/ios3x_img_banner@3x.png" alt="" />
      </div>
      <div class="filtrate">
        <div class="filLeft">
          <div
            @click="tuijian"
            :class="{ red: this.gaolian === 'tuijian' && show }"
          >
            推荐
          </div>
          <div @click="jvli" :class="{ red: this.gaolian === 'jvli' }">
            距离
          </div>
          <img v-if="this.jvPic === 0" src="../../assets/wu.png" alt="" />
          <img v-else-if="jvPic === 1" src="../../assets/up.png" alt="" />
          <img v-else src="../../assets/down.png" alt="" />
          <div @click="pinfen" :class="{ red: this.gaolian === 'pinfen' }">
            评分
          </div>
          <img v-if="this.pinPic === 0" src="../../assets/wu.png" alt="" />
          <img v-else-if="pinPic === 1" src="../../assets/up.png" alt="" />
          <img v-else src="../../assets/down.png" alt="" />
        </div>
        <div class="filRight" @click="saixuan" :class="{ red: !show }">
          筛选
        </div>
      </div>
    </div>
    <div class="conent">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <comitem
          v-for="(item, index) in allComList"
          :key="index"
          :item="item"
        />
      </van-list>
    </div>
    <tantan
      ref="tantan"
      @passShow="passShow"
      :jvPic="jvPic"
      @passJvli="passJvli"
      @passList="passList"
      :tuijian="tuijian"
    />
  </div>
</template>

<script>
import comitem from './com/comitem'
import tantan from './com/tantan'
// import Vue from 'vue'
// 导企业列表
import { companyList } from '@/api/api.js'
export default {
  data () {
    return {
      // 图片
      show: true,
      // 显示加载中
      loading: false,
      // 加载完成
      finished: false,
      qiye: {
        q: '',
        start: 0,
        limit: 5,
        score: undefined,
        distance: undefined
      },
      // 企业列表
      allComList: [],
      // 点击高亮
      gaolian: 'tuijian',
      // 距离图片
      jvPic: 0,
      // 评分图片
      pinPic: 0,
      // 判断企业是否变换
      newValue: 0,
      timer: 0
    }
  },
  methods: {
    // 下拉和列表一加载事件
    onLoad () {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        companyList(this.qiye).then(res => {
          this.allComList = [...this.allComList, ...res.data.list]
          this.qiye.start = this.qiye.start + this.qiye.limit
          this.loading = false
          if (res.data.list.length === 0) {
            this.finished = true
          }
        })
      }, 500)
    },
    onkeydown (e) {
      const curkey = e.which
      if (curkey === 13) {
        if (this.qiye.q.length === 0) {
          this.finished = false
          this.qiye.start = 0
          this.allComList = []
          this.onLoad()
        } else {
          this.qiye.start = 0
          this.allComList = []
          this.onLoad()
        }
      }
    },
    // 点击推荐
    tuijian () {
      this.qiye.q = ''
      this.qiye.score = undefined
      this.qiye.distance = undefined
      this.gaolian = 'tuijian'
      this.jvPic = 0
      this.pinPic = 0
      this.qiye.start = 0
      this.allComList = []
      this.onLoad()
    },
    // 点击距离
    jvli () {
      this.qiye.score = undefined
      this.pinPic = 0
      if (this.jvPic === 1) {
        this.jvPic = 2
        this.qiye.distance = 'desc'
        // this.loading = false
        this.finished = false
        this.qiye.start = 0
        this.allComList = []
        this.onLoad()
      } else {
        this.qiye.distance = 'asc'
        // this.loading = false
        this.finished = false
        this.qiye.start = 0
        this.allComList = []
        this.onLoad()
        this.jvPic = 1
      }
      this.gaolian = 'jvli'
    },
    // 点击评分
    pinfen () {
      this.distance = undefined
      this.jvPic = 0
      if (this.pinPic === 1) {
        this.pinPic = 2
        this.qiye.score = 'desc'
        this.finished = false
        this.loading = false
        this.allComList = []
        this.qiye.start = 0
        this.onLoad()
      } else {
        this.pinPic = 1
        this.qiye.score = 'asc'
        this.finished = false
        this.loading = false
        this.allComList = []
        this.qiye.start = 0
        this.onLoad()
      }
      this.gaolian = 'pinfen'
    },
    // 点击筛选
    saixuan () {
      this.gaolian = 'saixuan'
      this.$refs.tantan.show = true
      this.$refs.tantan.arr()
    },
    passShow (value) {
      this.show = !value
    },
    passJvli (value) {
      this.jvPic = value
    },
    // 筛选
    passList (value) {
      this.loading = false
      this.finished = false
      this.qiye.start = 0
      this.qiye = value
      this.allComList = []
      this.onLoad()
    }
  },
  components: {
    comitem,
    tantan
  },
  created () {
    // this.allCom()
  }
}
</script>

<style lang="less" scoped>
.company {
  padding: 0 20px;
  .to {
    width: 100%;
    padding: 0 20px;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    .search {
      width: 100%;
      height: 54px;
      .van-search {
        padding: 10px 0;
        // padding-right: 10px;
      }
      strong {
        font-size: 20px;
        line-height: 54px;
        text-align: center;
        // padding: 0 10px;
      }
    }
    .picture {
      box-sizing: border-box;
      margin-top: 10px;
      // padding: 0 10px;
      width: 100%;
      height: 150px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .filtrate {
      display: flex;
      margin-top: 10px;
      height: 25px;
      justify-content: space-between;
      .filLeft {
        display: flex;
        div {
          font-size: 20px;
          line-height: 25px;
          margin-left: 20px;
          &:nth-child(1) {
            margin-left: 0;
          }
        }
        img {
          width: 20px;
          height: 25px;
        }
      }
      .filRight {
        font-size: 20px;
        line-height: 25px;
      }
    }
  }
  .conent {
    margin-top: 255px;
  }
  .red {
    color: red;
  }
}
</style>
